<template>
  <div class="teacher-container">
    <a-card class="layout-card">
      <!-- <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane key="FORMAL" tab="正评状态" />
        <a-tab-pane key="TEST" tab="试评状态" />
      </a-tabs> -->
      <SearchGroup
        :labelOption="labelOption"
        @handleSearch="loadData(1)"
        @handleReset="reset"
        :searchOption="filterOption"
      />
      <a-table
        class="tablstyle"
        rowKey="id"
        :scroll="{ x: 1450 }"
        bordered
        :loading="loading"
        :pagination="false"
        :dataSource="list"
        :columns="columns"
      >
        <template #bodyCell="{ column, record, index, text }">
          <template v-if="column.dataIndex == 'index'">
            {{ (curPage - 1) * pageSize + (index + 1) }}
          </template>
          <template v-if="column.dataIndex == 'jd'">
            <a-progress
              :stroke-color="{
                '0%': '#0078FF',
                '100%': '#14C5F3',
              }"
              :percent="text"
            />
          </template>
          <template v-if="column.dataIndex == 'operation'">
            <a-button
              type="link"
              v-if="route.meta?.buttonList?.includes('TeacherSee')"
              :disabled="!record.doNum"
              @click="goDetailPage(record)"
            >
              查看
            </a-button>
          </template>
        </template>
      </a-table>
      <a-pagination
        class="pagination"
        :show-total="total => `共 ${total} 条`"
        :show-size-changer="false"
        show-quick-jumper
        v-model:current="curPage"
        v-model:pageSize="pageSize"
        :total="total"
      />
    </a-card>
  </div>
</template>
<script lang="ts" setup>
import { h, ref, watch, onMounted, computed } from 'vue'
import { useList } from '/@/hooks/web/useList'
import { getReviewTeacherList } from '/@/api/management/reviewProgress'
import { router } from '/@/router'
import { useUserStore } from '/@/store/modules/user'
import { useRoute } from 'vue-router'

const route = useRoute()
const userStore = useUserStore()
const userInfo = computed(() => userStore.getUserInfo)
const activeKey = ref('FORMAL')

const columns = ref([
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    align: 'center',
    width: 80,
    fixed: true,
  },
  {
    title: '评阅教师',
    dataIndex: 'jsxm',
    key: 'jsxm',
    align: 'center',
    width: 180,
  },
  {
    title: '教师工号',
    dataIndex: 'jsgs',
    key: 'jsgs',
    align: 'center',
    width: 150,
  },
  {
    title: '评阅科目',
    dataIndex: 'kmmc',
    key: 'kmmc',
    align: 'center',
    width: 120,
  },
  {
    title: '评阅题型',
    dataIndex: 'stLx',
    key: 'stLx',
    align: 'center',
    width: 120,
  },
  {
    title: '评阅题目',
    dataIndex: 'stMc',
    key: 'stMc',
    align: 'center',
    width: 120,
  },
  {
    title: '评阅试题数',
    dataIndex: 'doNum',
    key: 'doNum',
    align: 'center',
    width: 120,
    customRender: params => {
      if (!params.value) return '0题'
      return params.value + '题'
    },
  },
  {
    title: '操作',
    dataIndex: 'operation',
    align: 'center',
    width: 80,
    fixed: 'right',
  },
])
const labelOption = ref([{ name: '教师工号', key: 'jsgh', labelWidth: 80, inputWidth: 180 }])

const {
  defaultFilterOption,
  reset,
  loadData,
  filterOption,
  curPage,
  total,
  pageSize,
  list,
  loading,
} = useList(getReviewTeacherList, {
  defaultFilterOption: { kmpyzt: activeKey.value, kmYear: userInfo.value.kmYear },
})



watch(
  () => activeKey.value,
  () => {
    defaultFilterOption['kmpyzt'] = activeKey.value
    loadData()
  }
)
onMounted(async () => {
  
})

const goDetailPage = record => {
  router.push({
    name: 'teacherDetail',
    query: {
      id: record.userId,
      Kmpyzt: activeKey.value,
      kmYear: userInfo.value.kmYear,
      kmdm: record.kmdm,
      stLx: record.stLx,
    },
  })
}
</script>
<style lang="less" scoped>
.teacher-container {
  // height: @c_height;
}
.layout-card {
  border-radius: 8px;
}
.tablstyle {
  padding: 15px 0;
}

.btn {
  margin-left: 20px;
}
</style>
<style lang="less">
.teacher-info {
  .ant-pagination {
    margin-top: 20px;
  }
}
</style>
